{% extends "back.html" %}
{% block hello %}
    {% import "fenye.html" as macros %}
    <div class="tpl-content-wrapper" style="margin-top: -7px;">
        <div class="tpl-content-page-title">
        </div>
        <div class="tpl-portlet-components" >
            <div class="portlet-title">
                <div class="caption font-green bold">
                    <span class="am-icon-code"></span> 接口
                </div>
            </div>
            {% with messages = get_flashed_messages() %}
                {% if messages %}
                    <ul class='flashes'>
                    {% for message in messages %}
                        <li style="color:red">{{ message }}</li>
                    {% endfor %}
                {% endif %}
            </ul>
            {% endwith %}
            <strong>选择项目：</strong>
            <select id="projectinter" onclick="getprointer()" >
                {% for project in projects %}
                    <option>{{ project.project_name }}</option>
                {% endfor %}
            </select>
            <span>接口的类型：</span>
            <select id="interfacetype" onclick="getprointer()">
                <option>http</option>
                <option>dubbo</option>
            </select>
            <div style="margin-top: 10px">
                <a onclick="addinter()">
                    <input type="button" name="" value="添加" class="am-btn am-btn-default am-btn-success">
                </a>
                <a href="{{url_for('interface.daoru_inter')}}">
                    <input type="button" name=""  value="批量导入" class="am-btn am-btn-default am-btn-success">
                </a>
                <button class="btn-default am-btn-default am-btn" onclick="shezhiguanliyuan()">导出接口</button>
            </div>
            <table class="am-table am-table-hover table-main" style="width:100%;table-layout:fixed;">
                <thead>
                <tr  id="interfacete">
                </tr>
                </thead>
                <tbody id="testyonglis" >
                </tbody>
            </table>
            <nav aria-label="Page navigation" class="pull-right">
                <ul class="pagination">
                    {{ html|safe }}
                </ul>
            </nav>

        </div>
    </div>
    <div style="display:none;position:fixed;z-index: 210;width: 800px;top: 100px;left: 20%;box-shadow: 0 0 10px rgba(0,0,0,0.6);border: solid 1px #255c71;border-radius: 5px 5px 0 0;background-color: #9eacb4"  id="ceshiyongli">
    <form method="POST" action="{{url_for('interface.daochuinterface')}}">
        <div style="height: 5px;">请选择导出接口项目：</div>
        <div style="background-color: whitesmoke;margin-top: 24px" >
        选择导出的项目:
            <select name="interface_type"  >
                {% for project in projects %}
                    <option name="project">{{ project.project_name }}</option>
                {% endfor %}
            </select>
        </div>
        <div style="margin-top: 50%;margin-bottom: auto">
            <input value="导出" type="submit" class="btn-default shezhiguanliyuan" >
            <input value="取消" type="button" class=" btn-default"  onclick="guanbi()" >
        </div>
        </form>
    </div>
    <div style="display:none;position:fixed;z-index: 210;width: 800px;top: 100px;left: 20%;box-shadow: 0 0 10px rgba(0,0,0,0.6);border: solid 1px #255c71;border-radius: 5px 5px 0 0;background-color: #9eacb4"  id="addinterface">
        <div style="height: 5px;">添加接口</div>
        <div style="background-color: whitesmoke;margin-top: 24px" >
            <p >
                项目：<select id="project">
                {% for project in projects %}
                <option>{{ project.project_name }}</option>
                {% endfor %}
            </select>
            </p>
        <p >
                模块：<select id="model">
                {% for model in models %}
                <option>{{ model.model_name }}</option>
                {% endfor %}
            </select>
            </p>
            <p >
                接口名字：<input id="name" placeholder="请输入接口的名称">
            </p>
        <p >
                接口url：<input id="url" placeholder="请输入接口的url">
            </p>
        <p>协议类型：
            <select id="xieyi">
                <option>http</option>
                <option>dubbo</option>
            </select>
        </p>
        <p >
                接口header：<input id="headers" placeholder="请输入接口的headers"> <span style="color: #8D99A8">
                        dubbo接口这里需要填写入参对象
                    </span>
            </p>
        <p>
            请求方法
            <input id="meth" placeholder="请输入接口的请求方法">
        </p>
        </div>
        <div style="margin-top: 1%;margin-bottom: auto">
            <input value="添加" type="button" class="btn-default"  onclick="add_interface()" >
            <input value="取消" type="button" class=" btn-default"  onclick="guan()" >
        </div>
    </div>
{% endblock %}
{% block js %}
     <script type="text/javascript">
        window.onload=getprointer();
        function getprointer() {
            var obj = document.getElementById('projectinter');
            var index=obj.selectedIndex;
            var value = obj.options[index].value;
            var interfacetest = document.getElementById('interfacetype');
            var inde=interfacetest.selectedIndex;
            var valu = interfacetest.options[inde].value;
            var data={};
            data['project']=value;
            data['interfacetype']=valu;
            $.ajax({
                url:'{{ url_for('interface.ser_inter') }}',
                type:'POST',
                data:JSON.stringify(data),
                contentType: 'application/json; charset=UTF-8',
                processData:false,
                success:function(data){
                    if (data['code']==200 ){
                        var mdata =data['data'];
                        var insertss=$('#testyonglis');
                        var inte=$('#interfacete');
                        insertss.empty();
                        if (data['typeinter']=='http'){
                            inte.empty();
                            inte.append("<th>接口id</th><th>项目名称</th><th>所属模块</th><th>接口名称</th><th style='overflow:hidden;'>接口地址</th><th>接口headers</th><th>接口请求方法</th><th>操作</th>")
                        }else if(data['typeinter']=='dubbo'){
                            inte.empty();
                            inte.append("<th>id</th><th>项目名称</th><th>模块</th><th>接口名称</th><th style='overflow:hidden;'>url地址</th><th>接口名称</th><th>接口请求方法</th><th>操作</th>")
                        }
                        if (mdata.length<1){
                            insertss.append("<tr id='"+mdata[i].id+"'><td><h5><strong style='color:red'>没有找到接口</strong></h5><td></tr>")
                        }
                        else for(var i=0;i<mdata.length;i++){
                            insertss.append("<tr id='"+mdata[i].id+"'><td>"+mdata[i].id+"</td><td><label class='label-important'>"+mdata[i].projects_id+"</label></td><td>"+mdata[i].model_id+"</td><td>"+mdata[i].Interface_name+"</td><td>"+mdata[i].Interface_url+"</td><td style='width: 10%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;'>"+mdata[i].Interface_headers+"</td><td>"+mdata[i].Interface_meth+"</td><td><a href='/interfac_edit/"+mdata[i].id+"'><input type='button' value='编辑' class='btn btn-primary'></a><a onclick='deleteinterface("+mdata[i].id+")'><input type='button' value='删除' class='btn btn-danger'></a><a href='/interface_one/"+mdata[i].id+"'' ><input type='button' class='btn btn-primary' value='详情' ></a></td></tr>")};
                    }
                },error:function (res) {
                    alert('异步请求失败，请联系管理员！！！');
                    window.location.reload();
                }
            })
        }
        function  shezhiguanliyuan() {
            var  divshow=document.getElementById('ceshiyongli');
                divshow.style.display='block';
        }
        function guanbi() {
            var  divshow=document.getElementById('ceshiyongli');
            divshow.style.display='none';
        }
        function addinter() {
           var m=document.getElementById('addinterface');
            m.style.display='';
        }
        function  guan() {
            var m=document.getElementById('addinterface');
            m.style.display='none';
        }
        function add_interface() {
            var projects=document.getElementById('project');
            var  index=projects.selectedIndex;
            var project=projects.options[index].value;
            var models=document.getElementById('model');
            var  inde=models.selectedIndex;
            var model=models.options[inde].value;
            var name=document.getElementById('name').value;
            var url=document.getElementById('url').value;
            var headers=document.getElementById('headers').value;
            var xieyis=document.getElementById('xieyi');
            var ind=xieyis.selectedIndex;
            var xieyi=xieyis.options[ind].value;
            var meth=document.getElementById('meth').value;
            var data={};
            data['project']=project;
            data['model']=model;
            data['name']=name;
            data['url']=url;
            data['headers']=headers;
            data['xieyi']=xieyi;
            data['meth']=meth;
            if (name.length<1){
                alert('接口名称不能为空')
            }else {
                if(url.length<1){
                    alert('接口地址不能为空')
                }else {
                    if(meth.length<1){
                        alert('接口方式不能为空')
                    }else {

            $.ajax({
                url: '{{url_for( 'home.interface') }}',
                type: 'POST',
                data: JSON.stringify(data),
                contentType: 'application/json; charset=UTF-8',
                processData: false,
                success: function (result) {
                    if(result['code']==2){
                        alert(result['data']);
                        location.reload()
                    }
                    else{
                        alert(result['data']);
                    }
                }
            }
            )
                    }
                }
            }
        }
        function deleteinterface(id) {
            $.ajax({
                url:'{{url_for( 'home.interface') }}',
                type:'DELETE',
                data:id,
                contentType: 'application/json; charset=UTF-8',
                processData:false,
                success:function(data){
                    if(data['code']!=2){
                        alert(data['data'])
                    }else{
                        alert(data['data']);
                        caseid=document.getElementById(id);
                        caseid.hidden=true;
                    }
                }
            })
        }
    </script>
{% endblock %}